<template>
	<el-card>
		<div class="accessBox">
			<el-form :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">
				<el-form-item>
					<el-input v-model="state.queryForm.taskName" placeholder="任务名称"></el-input>
				</el-form-item>
				<!-- <el-form-item>
				  <fast-project-select v-model="state.queryForm.projectId" placeholder="所属项目" clearable></fast-project-select>
				</el-form-item> -->
				<el-form-item>
					<fast-select v-model="state.queryForm.status" dict-type="release_status" placeholder="发布状态" clearable></fast-select>
				</el-form-item>
				<el-form-item>
					<fast-select v-model="state.queryForm.runStatus" dict-type="run_status" placeholder="最近运行状态" clearable></fast-select>
				</el-form-item>
				<el-form-item>
					<el-button @click="getDataList()" :icon="Search">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button v-auth="'data-integrate:access:save'" :icon="Plus" type="primary" @click="addOrUpdateHandle()">新增</el-button>
				</el-form-item>
				<!-- <el-form-item>
					<el-button v-auth="'data-integrate:access:delete'" type="danger" @click="deleteBatchHandle()">删除</el-button>
				</el-form-item> -->
			</el-form>
			<el-table
				v-loading="state.dataListLoading"
				:data="state.dataList"
				border
				style="width: 100%"
				max-height="calc(100vh - 320px )"
				@selection-change="selectionChangeHandle"
			>
				<el-table-column prop="id" label="主键ID" header-align="center"  align="center" width="100"></el-table-column>
				<el-table-column prop="taskName" label="名称" header-align="center" align="center" show-overflow-tooltip></el-table-column>
				<!-- <fast-table-project-column prop="projectId" label="所属项目" header-align="center" align="center" show-overflow-tooltip></fast-table-project-column> -->
				<el-table-column prop="taskType" label="类型" header-align="center" align="center" width="160">
					<template #default="scope">
						<el-tag v-show="scope.row.taskType == 1" type="success">{{
							getDictLabel(store.appStore.dictList, 'task_type', scope.row.taskType)
						}}</el-tag>
						<el-tag v-show="scope.row.taskType == 2">{{ getDictLabel(store.appStore.dictList, 'task_type', scope.row.taskType) }}</el-tag>
						<el-tag v-show="scope.row.taskType == 3" type="warning">{{
							getDictLabel(store.appStore.dictList, 'task_type', scope.row.taskType)
						}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="cron" label="cron表达式" header-align="center" align="center" width="120">
					<template #default="scope">
						<el-tag>{{ scope.row.cron ? scope.row.cron : '无' }}</el-tag>
					</template>
				</el-table-column>
				<fast-table-column prop="status" label="发布状态" header-align="center" align="center" dict-type="release_status"></fast-table-column>
				<fast-table-column
					prop="runStatus"
					show-overflow-tooltip
					label="最新状态"
					header-align="center"
					align="center"
					dict-type="run_status"
				></fast-table-column>
				<el-table-column
					prop="startTime"
					label="最近开始时间"
					header-align="center"
					align="center"
					width="160"
					show-overflow-tooltip
				></el-table-column>
				<el-table-column prop="endTime" label="最近结束时间" header-align="center" align="center" width="160" show-overflow-tooltip></el-table-column>
				<!-- <el-table-column prop="nextRunTime" label="下次执行时间" header-align="center" align="center" width="160" show-overflow-tooltip></el-table-column> -->
				<el-table-column prop="releaseTime" label="发布时间" header-align="center" align="center" width="160" show-overflow-tooltip></el-table-column>
				<fast-creator-column prop="releaseUserId" label="发布人" header-align="center" align="center"></fast-creator-column>
				<fast-creator-column prop="creator" label="创建者" header-align="center" align="center"></fast-creator-column>
				<el-table-column prop="createTime" label="创建时间" header-align="center" align="center" width="160" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" fixed="right" header-align="center" align="center" width="380">
					<template #default="scope">
						<el-button v-auth="'data-integrate:access:info'" type="primary" link @click="getInfoHandler(scope.row.id)">查看</el-button>
						<el-button
							:disabled="scope.row.status == '1'"
							v-auth="'data-integrate:access:update'"
							type="primary"
							link
							@click="addOrUpdateHandle(scope.row.id)"
							>编辑</el-button
						>
						<el-button v-if="scope.row.status == '0'" v-auth="'data-integrate:access:release'" type="primary" link @click="release(scope.row.id)"
							>发布</el-button
						>
						<el-button v-if="scope.row.status == '1'" v-auth="'data-integrate:access:cancle'" type="primary" link @click="cancle(scope.row.id)"
							>撤回</el-button
						>
						<el-button
							:disabled="scope.row.status == '1'"
							v-auth="'data-integrate:access:selfhandler'"
							type="primary"
							link
							@click="selfHandler(scope.row.id)"
							>执行</el-button
						>
						<!-- <el-button :disabled="scope.row.status == '1'" v-auth="'data-integrate:access:selfhandler'" type="danger" link @click="stopAcess(scope.row)">停止</el-button> -->
						<el-button type="primary" link @click="getAccessHistory(scope.row.id)">执行记录</el-button>
						<el-button
							v-auth="'data-integrate:access:delete'"
							type="primary"
							link
							:disabled="scope.row.status == '1'"
							@click="deleteBtn(scope.row.id)"
							>删除</el-button
						>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				:current-page="state.page"
				:page-sizes="state.pageSizes"
				:page-size="state.limit"
				:total="state.total"
				layout="total, sizes, prev, pager, next, jumper"
				@size-change="sizeChangeHandle"
				@current-change="currentChangeHandle"
			>
			</el-pagination>

			<!-- 弹窗, 新增 / 修改 -->
			<div class="drawerClass" style="height: 100%">
				<add-or-update ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
			</div>
			<!-- 弹窗 详情 -->
			<info ref="infoRef" v-if="isInfoVisible"></info>
			<!-- 弹窗 记录 -->
			<access-task ref="accessTaskRef"></access-task>
		</div>
	</el-card>
</template>

<script setup lang="ts" name="Data-integrateAccessIndex">
import { Delete, Edit, Search, Plus, CircleClose, Refresh } from '@element-plus/icons-vue'
import { useCrud } from '@/hooks'
import { nextTick, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus/es'
import AddOrUpdate from './add-or-update.vue'
import info from './info.vue'
import AccessTask from './access-task.vue'
import { IHooksOptions } from '@/hooks/interface'
import { accessRelease, accessCancle, handRun, accessAuth, stopTask } from '@/api/data-integrate/access'
import store from '@/store'
import { getDictLabel } from '@/utils/tool'

const state: IHooksOptions = reactive({
	dataListUrl: '/data-integrate/access/page',
	deleteUrl: '/data-integrate/access',
	queryForm: {
		taskName: '',
		projectId: '',
		dataDatabaseId: '',
		status: '',
		runStatus: ''
	}
})

const selectEnable = (row, index) => {
	if (row.status != '1') {
		return true
	} else {
		return false
	}
}

const addOrUpdateRef = ref()
const addOrUpdateHandle = (id?: number) => {
	if (id) {
		accessAuth(id)
			.then(res => {
				if (res.code == 0) {
					addOrUpdateRef.value.init(id)
				}
			})
			.catch(error => {
				// ElMessage.error(error.msg)
			})
	} else {
		addOrUpdateRef.value.init(id)
	}
}

const isInfoVisible = ref(false)
const infoRef = ref()
const getInfoHandler = id => {
	isInfoVisible.value = true
	nextTick(() => {
		infoRef.value.init(id)
	})
}

const accessTaskRef = ref()
const getAccessHistory = id => {
	accessTaskRef.value.init(id)
}

const release = id => {
	accessAuth(id)
		.then(res => {
			if (res.code == 0) {
				ElMessageBox.confirm('确定发布吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(() => {
						accessRelease(id).then(res => {
							ElMessage({
								message: '发布成功',
								type: 'success'
							})
							getDataList()
						})
					})
					.catch(() => {})
			}
		})
		.catch(error => {
			// ElMessage.error(error.msg)
		})
}

const deleteBtn = id => {
	accessAuth(id).then(res => {
		if (res.code == 0) {
			deleteBatchHandle(id)
		}
	})
}

const selfHandler = id => {
	accessAuth(id)
		.then(res => {
			if (res.code == 0) {
				ElMessageBox.confirm('确认执行吗，如果有正在执行的任务可能会延迟执行！', '警告', {
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(() => {
						handRun(id).then(res => {
							ElMessage({
								message: '手动调度执行成功，调度器执行完毕后可以去执行记录查看执行结果',
								type: 'success'
							})
							getDataList()
						})
					})
					.catch(() => {})
			}
		})
		.catch(error => {
			// ElMessage.error(error.msg)
		})
}

const cancle = id => {
	ElMessageBox.confirm('确认取消发布吗？', '警告', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			accessCancle(id).then(res => {
				ElMessage({
					message: '取消发布成功',
					type: 'success'
				})
				getDataList()
			})
		})
		.catch(() => {})
}

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)
</script>

<style>
.accessBox {
	height: calc(100vh - 170px);
	position: relative;
	overflow: hidden;
}
.accessBox .drawerClass .el-overlay {
	height: 100%;
	position: absolute !important;
	overflow: hidden;
}
</style>
